<template>
  <div class="prompt page" :class="{white: type === 1 || type === 3 }" ref="webview">
    <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" :class="{bg_white: type === 1 || type === 2 || type === 3 || type === 4 || type === 5  }" />
    <div class="box" :class="{top88: type === 1 || type === 2 || type === 3 || type === 4 || type == 5}">
      <div class="icon van-icon" :class="{success: type === 1 || type === 2 || type === 3 || type === 4, 'van-icon-clear': type === 5}"></div>
      <!-- <div class="icon van-icon" :class="{'van-icon-clear': type === 5}"></div> -->
      <template v-if="type === 1 || type === 4">
        <div class="text">申请成功,请耐心等候审查!</div>
      </template>
      <template v-if="type === 2">
        <div class="failure">恭喜您已完成支付!</div>
      </template>
      <template v-if="type === 3">
        <div class="text">提现申请成功,请耐心等候</div>
      </template>
      <template v-if="type === 5">
        <div class="text">申请失败,请重新申请</div>
      </template>
      <div class="submit" :class="{flex:type === 2}">
        <van-button class="btn red" v-if="type === 2" @click="$router.replace({ path: '/mall' })">返回商城</van-button>
        <van-button class="btn red" v-if="type === 5" @click="$router.replace({ path: '/declaration', query: {type: 1} })">重新申请</van-button>
        <van-button class="btn success" @click="goBark" v-if="type === 1 || type === 3 || type === 2 || type === 4">{{type === 1 || type === 3 || type === 4 ? '知道了' :type === 2 ? '查看订单' : ''}}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'prompt',
  data () {
    return {
      showPayPassword: false
    };
  },
  computed: {
    type: {
      get () {
        return parseInt(this.$route.query.type);
      },
      set (val) {
        return val;
      }
    },
    title () {
      return this.type === 1 || this.type === 4 || this.type === 5 ? '运营中心' : this.type === 3 ? '提现' : '支付完成';
    }
  },
  created () {

  },

  methods: {
    goBark () {
      if (this.type === 2) {
        this.$router.replace({ path: '/order/mall', query: { isFromRoute: true } });
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>
<style scoped lang="less">
.prompt.white {
  background-color: #fff;
}
.prompt {
  height: 100%;
  background-color: #fff;
  .box {
    text-align: center;
    .icon {
      width: 100px;
      height: 100px;
      background-repeat: no-repeat;
      background-size: 100px 100px;
      margin: 0 auto 20px;
    }
    .icon.success {
      background-image: url('/static/img/icon-success.png');
    }
    .icon.failure {
      background-image: url('/static/images/icon-failure.png');
    }
    .icon.fugou {
      margin-top: 60px;
      background-image: url('/static/images/icon-fugou.png');
    }
    .van-icon-clear {
      font-size: 100px;
      color: #ff0034;
      margin: 0 auto;
    }
    .name {
      font-size: 34px;
      padding: 30px 0 0;
      color: #353535;
      text-align: center;
    }
    .text {
      padding: 15px 0 0;
      text-align: center;
      font-size: 34px;
      color: #000;
    }
    .failure,
    .success {
      text-align: center;
      font-size: 40px;
      margin-top: 40px;
    }
    .failure {
      color: #ff0034;
    }
    .success {
      color: #26a463;
    }
    .submit.flex {
      display: flex;
    }
    .submit {
      margin: 65px 90px 0;
      text-align: center;
      .btn {
        flex: 1;
        width: 200px;
        height: 80px;
        margin: 0 15px;
        color: #fff;
        text-align: center;
        background-color: #007aff;
        line-height: 80px;
        border-radius: 80px;
        font-size: 34px;
        font-weight: 300;
      }
      .btn.white {
        border: 1px solid #ff0034; /*no*/
        background-color: #fff;
        color: #ff0034;
        font-weight: 400;
      }
      .btn.success {
        border: 1px solid #007aff; /*no*/
        background-color: #fff;
        color: #007aff;
        font-weight: 400;
      }
      .btn.red {
        background-color: #007aff;
        color: #fff;
      }
    }
  }
  .box.top88 {
    padding: 68px 0;
  }
  .box.top30 {
    padding: 0;
  }
}
</style>
